<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>bootstrap form</title>
<!-- Bootstrap core CSS -->
<link href="${basePath}bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8,"
	data-href="${basePath}bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet" id="bs-theme-stylesheet">
<!-- Bootstrap core JavaScript
		<!-- Placed at the end of the document so the pages load faster -->
<script src="${basePath}jquery-1.12.4/jquery-1.12.4.min.js"></script>
<script src="${basePath}bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<!-- bootstrap-datetimepicker -->
<link
	href="${basePath}bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" />
<script
	src="${basePath}bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>
<script
	src="${basePath}bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<!-- 加载的jquery脚本 -->
<script type="text/javascript">
	// dom加载完成时就执行该方法
	$(function() {
		$('#datetimepicker1,#datetimepicker2').datetimepicker({
			format : 'YYYY-MM-DD HH:mm:ss',
			locale : moment.locale('zh-cn')
		});
	});
</script>
</head>

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-2"></div>
					<div class="col-md-8">
						<form class="form-horizontal"
							action="${basePath}StudentInfoQueryServlet" method="post">
							<div class="form-group"></div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuName"
										name="stu_name" placeholder="请输入学生姓名">
								</div>

								<label for="inputEmail3" class="col-sm-2 control-label">性别</label>
								<div class="col-sm-4">
									<label class="radio-inline"> <input type="radio"
										id="stusex2" name="stu_sex" value="女"> 女
									</label> <label class="radio-inline"> <input type="radio"
										id="stusex2" name="stu_sex" value="男"> 男
									</label>
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">出生日期</label>
								<div class="col-sm-4">
									<!-- <input type="text" class="form-control" id="stuBirthday"
										name="stuBirthday" placeholder="请选择出生日期"> -->
									<div class='input-group date' id='datetimepicker1'>
										<input type='text' class="form-control" id="stuBirthday"
											name="stu_birthday" /> <span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
									<div class='input-group date' id='datetimepicker2'>
										<input type='text' class="form-control" id="stuBirthday2"
											name="stu_birthday2" /> <span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>

								<label for="inputPassword3" class="col-sm-2 control-label">地址</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuAddress"
										name="stu_address" placeholder="请输入地址">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">电话</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuTel"
										name="stu_tel" placeholder="请输入电话">
								</div>

								<label for="inputPassword3" class="col-sm-2 control-label">系别</label>
								<div class="col-sm-4">
									<select class="form-control" id="stuDepartment"
										name="stu_department">
										<option></option>
										<option value="1">计算机</option>
										<option value="2">电信</option>
										<option value="3">机电</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-4 col-sm-4">
									<button type="submit" class="btn btn-default">查询</button>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<button type="reset" class="btn btn-default">重置</button>
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-2"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="bs-example" data-example-id="hoverable-table">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>出生日期</th>
					<th>地址</th>
					<th>电话</th>
					<th>系别</th>
					<th>头像</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${sessionScope.lstStus }" var="eachStu" varStatus="st">					
					<tr>
					<th scope="row">${st.index+1 }</th>
					<td>${eachStu.stu_name}</td>
					<td>${eachStu.stu_sex}</td>
					<td>${eachStu.stu_birthday}</td>
					<td>${eachStu.stu_address}</td>
					<td>${eachStu.stu_tel}</td>
					<td>${eachStu.stu_department}</td>
					<td><img style="width: 30px;heigth:30px;" src="${basePath}${eachStu.stu_img}"></td>
				</tr>
				</c:forEach>				
			</tbody>
		</table>
	</div>
</body>

</html>